<template>
  <!-- ABCD选项 -->
  <view>
    <view v-for="item in paperItem.optionsItems" :key="item.questionId" class="options-item"
      :class="[submitStatus(item)]" @click="onSelect(item)">
      <view class="option-select iconfont" :class="[judgeSelect(item)]"></view>
      <text class="option-lable">{{ item.prefix }}.</text>
      <!-- <rich-text class="rich-text" :nodes="item.value"></rich-text> -->
      <mp-html class="rich-text" :content="item.content" />
    </view>
  </view>
</template>

<script>
  import config from '@/uni_modules/sv-exam-plus/config.js'
  import {
    arrEqual
  } from '@/uni_modules/sv-exam-plus/utils/index.js'
  import store from '@/uni_modules/sv-exam-plus/store/index.js'

  export default {
    props: {
      // 题目数据
      paperItem: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        config, // 兼容写法，需要先声明否则报错
        selected: [], // 未开启多选时，只保留一个元素
        correct: false // 初始化正确与否
      }
    },
    computed: {
      examType: {
        set(newType) {
          store.commit('updateType', newType)
        },
        get() {
          return store.state.examType
        }
      },
      isMultiple() {
        return this.paperItem.questionType === 1 ? 1 : this.paperItem.questionType === 2 ? 2 : ''
      }
    },
    watch: {
      paperItem: {
        handler(newData) {
          this.selected = newData.selected || newData.customArray||[]
          this.correct = newData.customArray === newData.correctArray ? true : false
        }
      }
    },
    created() {
      this.init()
    },
    methods: {
      init() {
        this.selected = this.paperItem.selected || this.paperItem.customArray||[]
        this.correct = this.paperItem.correct ? true : false
      },
      onSelect(e) {
        // 若已提交，则无法再进行选择
        if (this.paperItem.submitted) return
        if (this.isMultiple === 2) {
          /**
           * 多选
           * 若selected中已包含e.prefix选项，则移除，否则添加
           */
          this.selected = this.selected?.includes(e.prefix) ?
            this.selected?.filter((item) => item !== e.prefix) : [...this.selected, e.prefix]
        } else if (this.isMultiple === 1) {
          /**
           * 单选
           * 只保留最后一个元素
           */
          this.selected.push(e.prefix)
          const findex = this.paperItem.optionsItems.findIndex((item) => item.prefix == this.paperItem.customArray)
          const handleSubmit = {
            selected: this.selected || [],
            correct: this.paperItem.correct || false,
            paper: this.paperItem,
            index: findex
          }
          uni.$emit('e-exam-paper-item-submit', handleSubmit)
          // 跨组件通信 - 提交
          this.$set(this.paperItem, 'submitted', true)
        }

        /**
         * 比对答案
         * 比较answer与selected中元素是否相同(不考虑顺序)
         */
        this.correct = arrEqual(this.paperItem.correctArray, this.selected)

        this.$emit('change', {
          selected: this.selected,
          correct: this.correct
        })
      },
      /**
       * 计算提交结果状态
       * 若答对，则只显示正确状态，若答错，则显示正确状态和错误状态
       */
      submitStatus(item) {
        if (this.paperItem.submitted && this.examType !== this.config.examTypeDict[0]) {
          if (this.correct) {
            return this.paperItem.correctArray?.includes(item.prefix) ? 'correct-bg ' : ''
          } else {
            return this.paperItem.correctArray?.includes(item.prefix) ? 'correct-bg' : 'wrong-bg'
          }
        } else {
          return ''
        }
      },
      judgeSelect(item) {

        if (this.examType === this.config.examTypeDict[0]) {
          // 背题模式
          return this.paperItem.correctArray?.includes(item.prefix) ?
            'icon-correct primary-color' :
            'icon-wrong error-color'
        }
        if (this.isMultiple) {
          // 多选 - 刷题模式/模拟考试
          return this.selected?.includes(item.prefix) ? 'icon-select primary-color' : ''
        } else {
          // 单选 - 刷题模式/模拟考试
          return this.selected && this.selected[0] === item.prefix ? 'icon-select primary-color' : ''
        }
      }
    }
  }
</script>

<style lang="scss">
  @import '@/uni_modules/sv-exam-plus/icons/iconfont.css';

  .options-item {
    display: flex;
    align-items: center;
    margin-bottom: var(--paper-unit-12);
    padding: var(--paper-unit-12);
    border-radius: calc(#{var(--paper-unit-12)} / 2);
    background-color: var(--info-color);

    &.correct-bg {
      background-color: rgba(0, 216, 134, 0.6);
    }

    &.wrong-bg {
      background-color: rgba(255, 68, 79, 0.6);
    }

    .option-select {
      display: inline-block;
      width: var(--paper-unit-16);
      height: var(--paper-unit-16);
      background-color: var(--bg-color);
      border: 1px solid #{var(--border-color)};
      border-radius: 50%;
      margin-right: calc(#{var(--paper-unit-12)});
      box-sizing: content-box;
      cursor: pointer;
      flex-shrink: 0;
    }

    .option-lable {
      margin-right: 24rpx;
    }
  }

  .rich-text {
    display: inline-block;
    // pointer-events: none;
  }

  .primary-color {
    color: var(--primary-color);
  }

  .success-color {
    color: var(--success-color);
  }

  .warning-color {
    color: var(--warning-color);
  }

  .error-color {
    color: var(--error-color);
  }

  .info-color {
    color: var(--info-color);
  }
</style>